import { Directive } from "vue";
import { useMain,store } from "@/store/index";
import router from "@/routes/index"

// 判断单个权限
export const permission: Directive = {
    /**
    * @param mounted 是指令的一个生命周期
    * @param el 指令所绑定的元素，可以用来直接操作DOM
    * @param binding 一个对象，包含指令的很多信息
    */
    mounted(el, binding) {
        // value 获取用户使用自定义指令绑定的内容
        const { value } = binding;
        // 获取用户所有的按钮权限
        const useMainStore = useMain(store);
        let currentPath = router.currentRoute.value.path;
        const menuListInfo = useMainStore.menuListInfo;
        let permissionBtn: any[] = [];
        menuListInfo.forEach((item: any) => {
            if (item.pageUrl == currentPath) {
                permissionBtn = item.children?item.children:[];
            } else {
                if (item.children && item.children.length > 0) {
                    item.children.forEach((item2: any) => {
                        if (item2.pageUrl == currentPath) {
                            permissionBtn = item2.children?item2.children:[];
                        }
                    })
                }
            }
        })

        if (value) {
            // 判断传递进来的按钮权限，用户是否拥有
            // Array.some() 数组中有一个结果是true返回true，剩下的元素不会再检测
            // console.log('permissionBtn',permissionBtn);
            // console.log('value',value);
            
            const hasPermission = permissionBtn.some((role: any) => {
                return value == role.pageUrl;
            });

            // 当用户没有这个按钮权限时，设置隐藏这个按钮
            if (!hasPermission) {
                el.style.display = "none";
            }
        }
    }
}


// 判断多个权限,是否有其中一个
export const permissionMultiple: Directive = {
    /**
    * @param mounted 是指令的一个生命周期
    * @param el 指令所绑定的元素，可以用来直接操作DOM
    * @param binding 一个对象，包含指令的很多信息
    */
    mounted(el, binding) {
        // value 获取用户使用自定义指令绑定的内容
        const { value } = binding;
        
        // 获取用户所有的按钮权限
        const useMainStore = useMain(store);
        let currentPath = router.currentRoute.value.path;
        const menuListInfo = useMainStore.menuListInfo;
        let permissionBtn: any[] = [];
        menuListInfo.forEach((item: any) => {
            if (item.pageUrl == currentPath) {
                permissionBtn = item.children?item.children:[];
            } else {
                if (item.children && item.children.length > 0) {
                    item.children.forEach((item2: any) => {
                        if (item2.pageUrl == currentPath) {
                            permissionBtn = item2.children?item2.children:[];
                        }
                    })
                }
            }
        })
        if (value && value.length>0) {
            // 判断传递进来的按钮权限，用户是否拥有
            // Array.some() 数组中有一个结果是true返回true，剩下的元素不会再检测
            // console.log('permissionBtn',permissionBtn);
            // console.log('value',value);
            let hasPermission = false;
            value.forEach((item:any)=>{
               let hasP = permissionBtn.some((role: any) => {
                
                    return item == role.pageUrl;
                });
                if(hasP){
                    hasPermission = true;
                }
            })
            // console.log('hasPermission',hasPermission);
            
            // 当用户没有这个按钮权限时，设置隐藏这个按钮
            if (!hasPermission) {
                el.style.display = "none";
            }
        }else{
            el.style.display = "none";
        }
    }
}